jQuery ব্যবহার করে DOM এলিমেন্ট তৈরি, যোগ, এবং মুছে ফেলার প্রক্রিয়া খুবই সহজ। এই লেখায় append(), prepend(), remove(), এবং empty() মেথডগুলির ব্যবহার এবং কার্যকারিতা আলোচনা করা হবে।
append() মেথড
append() মেথড নির্দিষ্ট এলিমেন্টের ভেতরের শেষে নতুন কন্টেন্ট যোগ করে। এটি এলিমেন্টের মধ্যে সর্বশেষে নতুন এলিমেন্ট বা কন্টেন্ট সংযুক্ত করে।
উদাহরণ:
<ul id="myList">
<li>আইটেম 1</li>
<li>আইটেম 2</li>
</ul>
<script>
$(document).ready(function(){
$("#myList").append("<li>নতুন আইটেম</li>");
});
</script>
এই কোড দ্বারা "নতুন আইটেম" নামের একটি নতুন লিস্ট আইটেম #myList এর শেষে যোগ হবে।
prepend() মেথড
prepend() মেথড নির্দিষ্ট এলিমেন্টের ভেতরের শুরুতে নতুন কন্টেন্ট যোগ করে। এটি এলিমেন্টের মধ্যে প্রথমে নতুন এলিমেন্ট বা কন্টেন্ট সংযুক্ত করে।
উদাহরণ:
<ul id="myList">
<li>আইটেম 2</li>
<li>আইটেম 3</li>
</ul>
<script>
$(document).ready(function(){
$("#myList").prepend("<li>আইটেম 1</li>");
});
</script>
এই কোড দ্বারা "আইটেম 1" নামের একটি নতুন লিস্ট আইটেম #myList এর শুরুতে যোগ হবে।
remove() মেথড
remove() মেথড নির্দিষ্ট এলিমেন্টসমূহ এবং তাদের চাইল্ড এলিমেন্টসমূহকে DOM থেকে মুছে ফেলে।
উদাহরণ:
<ul id="myList">
<li>আইটেম 1</li>
<li id="removeMe">আইটেম 2</li>
<li>আইটেম 3</li>
</ul>
<script>
$(document).ready(function(){
$("#removeMe").remove();
});
</script>
এই কোড দ্বারা "আইটেম 2" নামের লিস্ট আইটেম মুছে ফেলা হবে।
empty() মেথড
empty() মেথড নির্দিষ্ট এলিমেন্টের সব চাইল্ড এলিমেন্টসমূহ মুছে ফেলে, কিন্তু নির্দিষ্ট এলিমেন্টটি মুছে ফেলে না।
উদাহরণ:
<div id="myDiv">
<p>প্যারাগ্রাফ 1</p>
<p>প্যারাগ্রাফ 2</p>
</div>
<script>
$(document).ready(function(){
$("#myDiv").empty();
});
</script>
এই কোড দ্বারা #myDiv এর ভেতরের সব প্যারাগ্রাফ মুছে ফেলা হবে, কিন্তু div টি থাকবে।
সারাংশ
jQuery-র এই মেথডগুলি DOM এলিমেন্ট হ্যান্ডলিংকে অনেক সহজ করে দেয়। append() এবং prepend() দিয়ে এলিমেন্ট যোগ করা, remove() দিয়ে এলিমেন্ট মুছে ফেলা, এবং empty() দিয়ে এলিমেন্টের কন্টেন্ট মুছে ফেলার ক্ষমতা ডেভেলপারদের জন্য অনেক সুবিধাজনক সমাধান প্রদান করে।
Read more
